<template>
    <el-card style="margin:20px">


        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="formInline.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="look" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="nulls">清空</el-button>
            </el-form-item>
            <br>
            <el-form-item>
                <el-button type="primary" @click="up = true">添加</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger">批量删除</el-button>
            </el-form-item>
        </el-form>


        <template>
            <el-table border stripe ref="multipleTable" :data="num === 1 ? dataList.items : usernameList.items">

                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="序号" width="80" align="center">
                    <!-- <template slot-scope="scope"></template> -->
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="150">
                </el-table-column>
                <el-table-column prop="nickName" label="用户昵称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="roleName" label="角色列表" width="200" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="gmtModified" label="更新时间" width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center" show-overflow-tooltip>
                    <template v-slot="{row,$index}">
                        <el-button type="info" size="mini" title="分配角色" icon="el-icon-user-solid"
                            @click="changetwo(row)" />
                        <el-button type="primary" size="mini" title="修改用户" icon="el-icon-edit"
                            @click="changeone(row)" />
                        <el-popconfirm :title="`确定删除 ${row.username} 吗?`" @onConfirm='getDeathList(row)'>
                            <template #reference>
                                <el-button style="margin-left:10px" type="danger" size="mini" title="删除用户"
                                    class="el-icon-delete" />
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <template>
            <div class="block" style="margin-top: 30px;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[5,10,15,20]" :page-size="page"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="this.num === 1 ? dataList.total : usernameList.total">
                </el-pagination>
            </div>
        </template>

        <template>
            <el-dialog title="添加用户" :visible.sync="up" width="50%">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="用户名" prop="pass">
                        <el-input v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户昵称" prop="checkPass">
                        <el-input v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码" prop="age">
                        <el-input type="password" v-model="ruleForm.age"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="up = fales">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </template>

        <template>
            <el-dialog title="修改用户" :visible.sync="change" width="50%">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="用户名" prop="pass">
                        <el-input v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户昵称" prop="checkPass">
                        <el-input v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm1('ruleForm1')">提交</el-button>
                        <el-button @click = "change = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </template>


        <template>
            <el-dialog title="设置角色" :visible.sync="two" width="50%">

                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                    <el-form-item label="角色列表">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
                            全选</el-checkbox>
                        <div style="margin: 15px 0;"></div>
                        <el-checkbox-group v-model="checkAllRoles" @change="handleCheckedRolesChange">
                            <el-checkbox v-for="(role,index) in boxList" :key="role.id" :label="role.id">
                                {{role.roleName}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="queren">立即创建</el-button>
                        <el-button @click="two = fales">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

        </template>
    </el-card>
</template>
<script>
import { mapState } from 'vuex';


export default {

    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('用户名不能为空'));
            }
        };
        var validatePass = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('用户名不能为空'));
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('用户名不能为空'));
            }
        };
        return {
            checkAll: false,
            roles: [],
            checkAllRoles: [],
            isIndeterminate: true,
            form: {
                name: '',
                type: [],
            },
            change: false,
            two: false,
            txt: {
                username: '',
                nickName: '',
                password: ''
            },
            txt1: {
                username: '',
                nickName: ''
            },
            formInline: {
                username: ''
            },
            num: 1,
            currentPage4: 1,
            page: 5,
            ruleForm: {
                age: '',
                checkPass: '',
                pass: '',
            },

            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                age: [
                    { validator: checkAge, trigger: 'blur' }
                ]
            },
            // tableData: dataList.items,
            multipleSelection: [],
            up: false,
            change: false
        };
    },
    mounted() {
        this.getDataList()
    },
    methods: {
        getDataList() {
            this.$store.dispatch('getDataList', { page: this.currentPage4, limit: this.page })
        },
        getUserNameList() {
            this.$store.dispatch('usernameListInfo', { page: this.currentPage4, limit: this.page, username: this.formInline.username })
        },
        getDeathList(row) {
            this.$store.dispatch('getDeathList', row.id)
            if (this.num === 1) { this.getDataList() } else { this.getUserNameList() }
        },
        getUpOneList(data) {
            this.$store.dispatch('getUpOne', data)
        },
        getChange(all) {
            this.$store.dispatch('getChangeList', all)
        },
        getBoxList(row) {
            this.$store.dispatch('getBoxList', row.id)
        },
        handleSizeChange(val) {
            this.page = val
            if (this.num === 1) { this.getDataList() } else { this.getUserNameList() }
        },
        handleCurrentChange(val) {
            this.currentPage4 = val
            if (this.num === 1) { this.getDataList() } else { this.getUserNameList() }
        },
        look() {
            this.num = 2
            this.getUserNameList()
        },
        nulls() {
            this.num = 1
            this.formInline.username = ''
        },
        submitForm() {
            this.txt = {
                nickName: this.ruleForm.checkPass,
                username: this.ruleForm.pass,
                password: this.ruleForm.age
            }
            // console.log(this.txt)
            this.getUpOneList(this.txt)
            this.up = false
            this.getDataList()
        },
        submitForm1() {
            this.txt1 = {
                nickName: this.ruleForm.checkPass,
                username: this.ruleForm.pass,
            }
            console.log(this.txt1)
            this.getChange(this.txt1)
            this.change = false
            this.getDataList()
        },
        changeone(row) {
            this.change = true
            this.ruleForm.pass = row.username
            this.ruleForm.checkPass = row.nickName
        },
        changetwo(row) {
            this.getBoxList(row)
            this.two = true
            this.form.name = row.username
        },
        queren(){
            
        },

        handleCheckAllChange(val) {
       this.checkAllRoles = val ? this.roles : [];
        this.isIndeterminate = false;
    },
     handleCheckedRolesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.roles.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.roles.length;
    },
    },
    computed: {
        ...mapState({
            dataList: state => state.shop.data
        }),
        ...mapState({
            usernameList: state => state.username.username
        }),
        ...mapState({
            boxList: state => state.box.box
        }),
    },
    watch: {
        boxList: {
            handler: function (newVal, oldVal) {
                this.roles = newVal.map(item => item.id)
            }
        },
        checkedRoles: {
            handler: function (newVal, oldVal) {
                this.checkAllRoles = newVal.map(item => item.id)
            }
        }
    },
}
</script>

<style scoped>

</style>
